@for $i from 1 to 31 {
    @if $i > 10{
        .i-text-#{$i}{
            font-size:#{$i}px;
        }
    }
   
    .i-px-#{$i}{
        padding-left:#{$i}px;
        padding-right:#{$i}px;
    }
    .i-py-#{$i}{
        padding-top:#{$i}px;
        padding-bottom:#{$i}px;
    }
    .i-p-#{$i}{
        padding:#{$i}px;
    }
    .i-pl-#{$i}{
        padding-left:#{$i}px;
    }
    .i-pr-#{$i}{
        padding-right:#{$i}px;
    }
    .i-pt-#{$i}{
        padding-top:#{$i}px;
    }
    .i-pb-#{$i}{
        padding-bottom:#{$i}px;
    }
    .i-m-#{$i}{
        margin:#{$i}px;
    }
    .i-ml-#{$i}{
        margin-left:#{$i}px;
    }
    .i-mr-#{$i}{
        margin-right:#{$i}px;
    }
    .i-mb-#{$i}{
        margin-bottom:#{$i}px;
    }
    .i-mt-#{$i}{
        margin-top:#{$i}px;
    }
    .i-mx-#{$i}{
        margin-right:#{$i}px;
        margin-left:#{$i}px;
    }
    .i-my-#{$i}{
        margin-top:#{$i}px;
        margin-bottom:#{$i}px;
    }
    .i-r-tl-#{$i}{
       border-top-left-radius:#{$i}px;
    }
    .i-r-tr-#{$i}{
        border-top-right-radius:#{$i}px;
    }
    .i-r-bl-#{$i}{
        border-bottom-left-radius:#{$i}px;
    }
    .i-r-br-#{$i}{
        border-bottom-right-radius:#{$i}px;
    }
    .i-r-b-#{$i}{
        border-bottom-left-radius:#{$i}px;
        border-bottom-right-radius:#{$i}px;
    }
    .i-r-t-#{$i}{
        border-top-left-radius:#{$i}px;
        border-top-right-radius:#{$i}px;
    }
    .i-r-l-#{$i}{
        border-top-left-radius:#{$i}px;
        border-bottom-left-radius:#{$i}px;
    }
    .i-r-r-#{$i}{
        border-top-right-radius:#{$i}px;
        border-bottom-right-radius:#{$i}px;
    }
    .i-round-#{$i}{
        border-radius: #{$i}px;
    }
}
.i-text-xss{
    font-size: 11 px;
}
.i-text-xs{
    font-size: 11 px;
}
$meiye: #4FA4AA;
$yueGreen: #58aa4f;
@each $color in meiye, yueGreen {
    .i-text-#{$color} {
        @if #{$color} == meiye {
            color: $meiye;
        }
        @if #{$color} == yueGreen {
            color: $yueGreen;
        }
    }
    .i-#{$color}{
        @if #{$color} == meiye {
            background-color: $meiye;
        }
        @if #{$color} == yueGreen {
            background-color: $yueGreen;
        }
        color: #fff;
    }
}
.i-text-s{
    font-size: 12 px;
}
.i-text-m{
    font-size: 14 px;
}
.i-text-n{
    font-size: 15 px;
}
.i-text-g{
    font-size: 17 px;
}
.i-text-lg{
    font-size: 18 px;
}
.i-text-xl{
    font-size: 20 px;
}

